.person-bank-card-wrap{
  .f-left{
    float: left;
  }
  .f-right{
    float: right;
  }
  .clear{
    clear: both;
  }
  .card-add{
    border: dashed 1px $card-border;
    border-radius: 4px;
    width: 340px;
    height: 220px;
    padding: 20px;
    .card-add-icon-wrap{
      line-height: 160px;
      font-size: 50px;
      text-align: center;
    }
  }
  .card-add:not(.readonly):hover{
    border: dashed 1px $default-color;
    color: $default-color;
    cursor: pointer;
  }
  .card{
       border: solid 1px $form-border;
       box-shadow: $shadow-card;
       border-radius: 4px;
       width: 340px;
       height: 220px;
       padding: 20px;
       .card-top{
         height: 28px;
         .user-name{
           width: 150px;
           overflow: hidden;
           font-weight: bold;
           font-size: 16px;
           line-height: 28px;
           text-overflow: ellipsis;
           white-space: nowrap;
         }
         .status{
           background-color: $badge-success;
           color: white;
           padding: 0px 6px 0px 6px;
           font-size: 14px;
           line-height: 24px;
         }
         .is-default{
           background-color: $badge-warning;
           color: white;
           margin-right: 12px;
           padding: 0px 6px 0px 6px;
           font-size: 14px;
           line-height: 24px;
         }
       }
       .card-number{
         height: 48px;
         font-size: 24px;
         line-height: 48px;
         width: 318px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
       }
       .card-middle1{
         height: 28px;
         line-height: 28px;
         color: #999999;
         font-size: 12px;
         .bank-title{

         }
         .bank-title-text{
           width: 200px;
           text-overflow: ellipsis;
           white-space: nowrap;
           overflow: hidden;
         }
       }

       .bank-card-position-middle{
         height: 28px;
         line-height: 28px;
         color: #999999;
         font-size: 12px;
         .bank-address{
         }
         .bank-address-text{
           width: 200px;
           text-overflow: ellipsis;
           white-space: nowrap;
           overflow: hidden;
         }
       }

       .card-bottom{
         height: 28px;
         line-height: 28px;
         color: $font-default;
         .bank-edit{
           cursor: pointer;
           .info-circle{
             padding-right: 8px;
           }
         }
         .bank-edit:hover{
           color: $default-color;
         }
       }

     }
  .card:hover{
    cursor: pointer;
    border: solid 1px white;
    box-shadow: 0px 0px 1px 1px $default-color;
  }
  .disabled-card{
    border: solid 1px gainsboro;
    border-radius: 4px;
    width: 340px;
    height: 220px;
    padding: 20px;
    .card-top{
      height: 28px;
      .user-name{
        width: 150px;
        overflow: hidden;
        font-weight: bold;
        font-size: 16px;
        line-height: 28px;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: $font-disabled;
      }
      .status{
        background-color: $font-disabled;
        color: white;
        padding: 0px 6px 0px 6px;
        font-size: 14px;
        line-height: 24px;
      }
      .is-default{
        background-color: $font-disabled;
        color: white;
        margin-right: 12px;
        padding: 0px 6px 0px 6px;
        font-size: 14px;
        line-height: 24px;
      }
    }
    .card-number{
      height: 48px;
      font-size: 24px;
      line-height: 48px;
      color: $font-disabled;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .card-middle1{
      height: 28px;
      line-height: 28px;
      color: $font-disabled;
      font-size: 12px;
      .bank-title{

      }
      .bank-title-text{
        width: 200px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }

    .bank-card-position-middle{
      height: 28px;
      line-height: 28px;
      color: $font-disabled;
      font-size: 12px;
      .bank-address{
      }
      .bank-address-text{
        width: 200px;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }

    .card-bottom{
      height: 28px;
      line-height: 28px;
      color: $font-default;
      .bank-edit{
        cursor: pointer;
        .info-circle{
          padding-right: 8px;
        }
      }
      .bank-edit:hover{
        color: $default-color;
      }
    }

  }
}
.person-bank-card-wrap-modal{
  .required-red{
    font-family: SimSun;
    color: $default-color-inverse;
  }
}
